<template>
  <div class="card-view fadeIn">

      <div class="item-card" v-for="(item, index) in imgList" :key="index" >
        <div class="cover-drawing">
          <img
            :src="item.url"
            class="cover-image"
          />
          <div class="cover-adress global-display global-a-items">
            <img src="@/icon/index/address.png" />
            <span class="text-show">北京</span>
          </div>
        </div>
        <p class="cart-Title-text text-show">飞</p>
        <div class="global-display global-j-content">
          <div
            class="card-name global-display global-a-items"
            v-for="(item_a, index_a) in 1"
          >
            <img
              src="https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/1684482930291-7048313.jpg"
              alt=""
              class="avatarUrl"
            />
            <p>张三</p>
          </div>
          <div class="card-name global-display global-a-items">
            <img src="@/icon/index/page-zan.png" alt="" class="page-zan" />
            <p>5</p>
          </div>
        </div>
      </div>

  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
const imgList = ref([
	{
		url: "https://pic.imgdb.cn/item/672629acd29ded1a8cb43cc0.png"
	},
	{
		url: "https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/1684482930291-7048313.jpg"
	},
	{
		url: "https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/1684482930291-7048313.jpg"
	},
	{
		url: "https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/1684482930291-7048313.jpg"
	},
		{
		url: "https://diancan-1252107261.cos.accelerate.myqcloud.com/lvyou/1684482930291-7048313.jpg"
	},
])
</script>

<style scoped>
/* ----------- */
.card-view{
	padding: 0 5px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.item-card{
	padding: 5px;
	box-sizing: border-box !important;
}
.data-left {
    grid-column: 1 / 2;
}
.data-right {
	grid-column: 2 / 3;
}
.cover-drawing{
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}
.cover-image{
	width: 100%;
	display: block;
	/* border-radius: 10px; */
	object-fit: cover;
}
.cover-adress{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 0 0 10px 10px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}
.cover-adress img{
	width: 12px;
	height: 12px;
	display: block;
}
.cover-adress span{
	font-size: 10px;
	font-weight: bold;
	color: #ffffff;
	padding-left: 5px;
}
.cart-Title-text{
	font-size: 14px;
	font-weight: bold;
	padding-top: 7px;
	line-height:1.4;
}
.card-name{
	padding: 7px 0;
}
.avatarUrl{
	width: 20px;
	height: 20px;
	object-fit: cover;
	border-radius: 50%;
}
.page-zan{
	width: 15px;
	height: 15px;
}
.card-name p{
	padding-left: 6px;
	font-size: 13px;
	color: #717375;
}
</style>
